import React, { Component } from 'react';
import BaseComponent from '@/components/BaseComponent';
import { defDrawerWidth } from '@/defaultSettings';
import { Descriptions, Drawer, Tabs } from 'antd';
import styles from './index.less';
import ProductionwasteList from '@/pages/Company/productionwaste/list';

const { TabPane } = Tabs;

/**
 * 预览视图
 */
class PreviewView extends BaseComponent {
  constructor(props) {
    super(props);
    this.state = {
      activeKey: '1',
    };
  }

  render() {
    const { onClose, visible = false, record } = this.props;
    return (
      <Drawer
        title="企业信息预览"
        placement="right"
        width={defDrawerWidth}
        closable={true}
        onClose={e => {
          if (onClose) {
            onClose(e);
          }
        }}
        visible={visible}
      >
        <Tabs activeKey={this.state.activeKey} onChange={this.handleTabOnChange}>
          <TabPane tab="基础信息" key="1"></TabPane>
          <TabPane tab="产废信息" key="2"></TabPane>
        </Tabs>
        {this.state.activeKey == '1' ? (
          <Descriptions bordered column={2}>
            <Descriptions.Item label="企业名称">{record.company_name}</Descriptions.Item>
            <Descriptions.Item label="法人代表">{record.legal_person}</Descriptions.Item>
            <Descriptions.Item label="营业执照" span={2}>
              <img
                className={styles.mimage}
                src={record.business_license}
                onClick={this.handlePreviewImage}
              />
            </Descriptions.Item>
            <Descriptions.Item label="企业类型">{record.company_name}</Descriptions.Item>
            <Descriptions.Item label="联系人">{record.contacts}</Descriptions.Item>
            <Descriptions.Item label="地址">{record.company_address}</Descriptions.Item>
            <Descriptions.Item label="联系方式">{record.contacts_mobile}</Descriptions.Item>
            <Descriptions.Item label="成立日期">{record.establishment_date}</Descriptions.Item>
            <Descriptions.Item label="到期日期">{record.business_term}</Descriptions.Item>
          </Descriptions>
        ) : null}

        {this.state.activeKey == '2' ? (
          <ProductionwasteList companyId={record['company_id']}></ProductionwasteList>
        ) : null}
      </Drawer>
    );
  }

  /**
   * 预览图片
   */
  handlePreviewImage = () => {
    const { record } = this.props;
    const { business_license } = record;
    if (business_license && business_license != '') {
      window.open(business_license);
    }
  };

  handleTabOnChange = key => {
    this.setState({
      activeKey: key,
    });
  };
}

export default PreviewView;
